<template>
	<view class="box">
		<view class="head">
			<image class="head-icon"
				src="https://mp-ae8470f8-f547-41b1-b360-006dd10063b9.cdn.bspapp.com/set/logo-icon.png">
			</image>
			<span class="title">运动健身后台系统</span>
		</view>
		<span class="tip"> 欢迎使用</span>
		<image class="avatar head-avatar" :src="avatar" @click="showMenu=!showMenu"></image>
		<view class="menu" v-if='showMenu'>
			<ul>
				<li>{{name}}</li>
				<li @click="$refs.pwd.open()">修改密码</li>
				<li @click="changeAvatar">修改头像</li>
				<li @click="$refs.name.open()">修改昵称</li>
				<li @click="logout">退出</li>
			</ul>
		</view>
		<uni-popup ref="pwd" background-color="#fff" @maskClick="showMenu = false">
			<view class="popup-content">
				<view class="popup_head">修改</view>
				<uni-forms ref="customForm" labelWidth="80px">
					<uni-forms-item :label="e" name="initpassword" required v-for="(e,ind) in passwordTemplate">
						<uni-easyinput v-model.trim="values[ind]" :placeholder="'请输入'+e" maxlength="15"
							type="password" />
					</uni-forms-item>
				</uni-forms>
				<button type="primary" @click="modifyPassword">修改</button>
			</view>
		</uni-popup>
		<uni-popup ref="name" background-color="#fff" @maskClick="showMenu = false">
			<view class="popup-content">
				<view class="popup_head">修改</view>
				<uni-forms ref="customForm" labelWidth="50px">
					<uni-forms-item label="姓名" name="newname" required>
						<uni-easyinput v-model.trim="newname" placeholder="请输入" maxlength="15" />
					</uni-forms-item>
				</uni-forms>
				<button type="primary" @click="modifyName">修改</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		verify
	} from '../database/index.js'

	export default {
		name: "HeadVue",
		data() {
			return {
				newname: '',
				values: ['', '', ''],
				passwordTemplate: ['原密码', '新密码', '确认密码'],
				avatar: this.$store.getters.getUserAvatar,
				showMenu: false,
				name: this.$store.getters.getUserName
			}
		},
		methods: {
			async modifyName() {
				this.showMenu = false
				if (!this.newname) {
					this.$showMsg('名字不能为空')
					return
				}
				if (this.name == this.newname) {
					this.$showMsg('和原用户名一致')
					return
				}
				let self = this
				let [isname, namemsg] = await verify('admin', {
					admin_account: self.$store.getters.getUserAccount
				}, {
					admin_name: self.newname
				})
				if (isname) {
					this.$showMsg('修改成功')
					await this.$store.commit('setUserName', this.newname)
					this.name = this.$store.getters.getUserName
					await this.$forceUpdate()
				} else {
					this.$showMsg('修改失败')
				}
				this.newname = ''
				await this.$refs.name.close()
			},

			async modifyPassword() {
				for (var i = 0; i < this.passwordTemplate.length; i++) {
					if (!this.values[i]) {
						this.$showMsg(`${this.passwordTemplate[i]}不能为空`)
						return
					}
				}
				if (this.values[1] != this.values[2]) {
					this.$showMsg('前后密码不一致')
					return
				}

				if (this.values[0] == this.values[1]) {
					this.$showMsg('和旧密码一致')
					return
				}
				let self = this
				let [ispwd, pwdmsg] = await verify('admin', {
					admin_account: self.$store.getters.getUserAccount,
					admin_pwd: self.values[0]
				}, {
					admin_pwd: self.values[1]
				})
				if (ispwd) {
					this.values.fill('')
					this.$showMsg('修改成功')
					await this.$refs.pwd.close()
					await this.$forceUpdate()
				} else {
					this.$showMsg('原密码错误')
				}
			},
			async changeAvatar() {
				this.showMenu = false
				await this.$forceUpdate()
				let res = await uni.chooseImage({
					count: 1,
					sourceType: ['album', 'camera']
				})
				let path = res.tempFilePaths[0]
				if (!res) {
					this.$showMsg('取消修改头像')
					return
				}
				console.log(path);
				let res1 = await uniCloud.uploadFile({
					filePath: path,
					cloudPath: 'userAvatar/' + Math.ceil(Math.random() * 10000000) + '.png',
					cloudPathAsRealPath: true,
				})
				let [isavatar, msgavatar] = await verify('admin', {
					admin_account: this.$store.getters.getUserAccount
				}, {
					admin_avatar: res1.fileID
				})

				if (isavatar) {
					this.$showMsg('修改成功')
					this.$store.commit('setUserAvatar', res1.fileID)
					this.avatar = res1.fileID
					this.$forceUpdate()
				} else {
					this.$showMsg('修改失败')
				}

			},
			async logout() {
				await this.$store.commit('logout');
				setTimeout(() => {
					this.$go2Page('login')
				}, 0.5 * 1000)
			},

		}
	}
</script>

<style lang="scss" scoped>
	$headIcon: 50px;


	::v-deep {
		.popup_head {
			letter-spacing: 2px;
			font-size: 1.2em;
			margin-bottom: 10px;
			text-align: center;
		}

		.uni-popup__wrapper {
			width: 250px;
			border-radius: 10px;
			padding: 15px;
		}
	}

	::v-deep {
		.tip {
			.uni-popup__wrapper {
				width: 50px;
				border-radius: 10px;
				margin-top: 80px;
				margin-left: 500px;
			}
		}

	}

	.box {
		position: relative;
		padding: 5px 15px;
		background-color: #033f7a;

		.menu {
			z-index: 9999;
			width: 150px;
			background-color: rgba(176, 196, 222, .5);
			padding: 5px 10px;
			position: absolute;
			right: 18px;
			top: 65px;
			border-radius: 10px/5px;

			ul {
				letter-spacing: 2px;
				background-color: transparent;

				li {
					color: white;
					margin-top: 10px;
					padding: 2px;
					text-align: center;

					&:hover {
						background-color: #7B68EE;
						border-radius: 10px/2px;
					}

					&:first-child {
						margin: 0;
					}
				}
			}
		}

		.head {
			display: flex;
			flex-direction: row;
			color: white;

			.head-icon {
				width: $headIcon;
				height: $headIcon;
			}



			.title {
				margin-top: 5px;
				letter-spacing: 8px;
				margin-left: 18px;
				color: white;
				font-size: 30px;

			}
		}

	}

	.tip {
		position: absolute;
		right: 125px;
		top: 10px;
		color: ghostwhite;
		margin-top: 20px;
		margin-left: 200px;
	}



	.head-avatar {
		position: absolute;
		right: 50px;
		top: 4px;
		border: 2px solid #fff;
	}
</style>